<template>
    <a-modal :title="title" :width="modalWidth" :visible="visible" :confirmLoading="confirmLoading"
        @cancel="handleCancel" cancelText="关闭" style="top:15%;height: 70%;overflow-y: hidden">
        <template slot="footer">
            <a-button key="back" @click="handleCancel">
                关闭
            </a-button>
        </template>
        <!-- 查询区域 -->
        <!-- <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="handleQuery">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="标题">
                            <a-input placeholder="请输入标题" v-model="queryParam.name"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="handleQuery">查询</a-button>
                            <a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
                            <a-button type="primary" @click="readAll" style="margin-left: 8px"
                                icon="book">全部标注已读</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div> -->
        <div style="margin-top: 5px">
            <a-table ref="table" size="default" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
                :pagination="pagination" :loading="loading">
                <template slot="customRenderTitle" slot-scope="text, record">
                    <span v-if="record.status =='1'" style="font-weight: bold">{{text}}</span>
                    <span v-if="record.status =='2'">{{text}}</span>
                </template>
                <span slot="action" slot-scope="text, record">
                    <a @click="showAnnouncement(record)">查看</a>
                </span>
            </a-table>
        </div>
        <!-- <show-announcement ref="ShowAnnouncement"></show-announcement> -->
        <!-- <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData" /> -->
    </a-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
// import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import DynamicNotice from '../../components/tools/DynamicNotice'
import Vue from 'vue'

export default {
    name: 'MsgList',
    // mixins: [JeecgListMixin],
    components: {
        // DynamicNotice,
        // ShowAnnouncement,
    },
    data() {
        return {
            title: '详情',
            modalWidth: 800,
            visible: false,
            confirmLoading: false,
            queryParam: {
                // userId: '',
                // roleType: Vue.ls.get('roleType'),
                // beginTime: '',
                // endTime: '',
            },
            pagination: {
                current: 1,
                pageSize: 5,
                pageSizeOptions: ['5', '10', '20', '30'],
                total: 0,
                onChange: (data) => {
                    this.pagination.current = data
                    console.log(data, '-------data')
                    this.getDetailList()
                },
            },
            columns: [
                {
                    title: '单号',
                    dataIndex: 'number',
                    scopedSlots: { customRender: 'customRenderNumber' },
                },
                {
                    title: '配送员',
                    dataIndex: 'username',
                },
                {
                    title: '数量',
                    dataIndex: 'deliveryCount',
                },
                // {
                //     title: '操作',
                //     dataIndex: 'action',
                //     align: 'center',
                //     scopedSlots: { customRender: 'action' },
                //     width: 50,
                // },
            ],
            url: {
                // list: '/deliveryFlow/list',
                batchUpdateStatus: '/msg/batchUpdateStatus',
                readAllMsg: '/msg/readAllMsg',
            },
            loading: false,
            openPath: '',
            formData: '',
            cModel: {},
            dataSource: [],
        }
    },
    methods: {
        showDialog(record) {
            this.visible = true
            this.handleReset()
            this.cModel = Object.assign({}, record)
            this.getDetailList()
        },
        getDetailList() {
            this.loading = true
            let params = {
                search: JSON.stringify({
                    userId: this.cModel.userId,
                    roleType: Vue.ls.get('roleType'),
                    beginTime: '',
                    endTime: '',
                }),
                column: 'createTime',
                order: 'desc',
                field: 'id',
                currentPage: this.pagination.current,
                pageSize: this.pagination.pageSize,
            }
            getAction('/deliveryFlow/list', params).then((res) => {
                if (res.code === 200) {
                    this.dataSource = res.data.rows
                    this.pagination.total = res.data.total
                }
                if (res.code === 510) {
                    this.$message.warning(res.data)
                }
                this.loading = false
            })
        },

        handleDetail: function () {
            this.visible = true
            this.getMessageList()
        },

        handleQuery() {
            this.pagination.current = 1
            this.getMessageList()
        },
        handleReset() {
            // this.queryParam.name = ''
            // this.handleQuery()
            this.pagination.current = 1
            this.pagination.total = 0
            this.dataSource = []
            this.cModel = {}
        },
        showAnnouncement(record) {
            postAction(this.url.batchUpdateStatus, { ids: record.id, status: '2' }).then((res) => {
                if (res && res.code === 200) {
                    this.handleReset()
                }
            })
            if (record.openType === 'component') {
                this.openPath = record.openPage
                this.formData = { id: record.busId }
                this.$refs.showDynamNotice.detail()
            } else {
                this.$refs.ShowAnnouncement.detail(record)
            }
        },
        readAll() {
            let that = this
            that.$confirm({
                title: '确认操作',
                content: '是否全部标注已读?',
                onOk: function () {
                    postAction(that.url.readAllMsg).then((res) => {
                        if (res && res.code === 200) {
                            that.$message.success(res.data)
                            that.handleReset()
                        }
                    })
                },
            })
        },
        getMessageList(arg) {
            if (!this.url.list) {
                this.$message.error('请设置url.list属性!')
                return
            }
            this.loading = true
            let params = Object.assign(
                {},
                { status: '1', name: this.queryParam.name, timeSwitch: '0' },
                { pageSize: this.pagination.pageSize, currentPage: this.pagination.current }
            )
            getAction(this.url.list, params).then((res) => {
                if (res.code === 200) {
                    this.dataSource = res.data.rows
                    // this.ipagination.total = res.data.total
                    this.pagination.total = res.data.total || 0
                    this.tableAddTotalRow(this.columns, this.dataSource)
                }
                if (res.code === 510) {
                    this.$message.warning(res.data)
                }
                this.loading = false
            })
        },
        close() {
            this.$emit('close')
            this.visible = false
        },
        handleCancel() {
            this.close()
        },
    },
}
</script>
<style scoped>
.ant-card-body .table-operator {
    margin-bottom: 18px;
}
.anty-row-operator button {
    margin: 0 5px;
}
.ant-btn-danger {
    background-color: #ffffff;
}
z .ant-modal-cust-warp {
    height: 100%;
}
.ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto;
}
.ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden;
}
</style>